/* 定义了网页文档的初始化 */
$(document).ready(function() {
	// 网页元素渲染完成执行
	// $('ul#imgList').css('margin-left', '-600px')
	moveLeft()
	showOrHide()
})

/**
 * 定义鼠标移入时显示按钮，移除时隐藏按钮的规则
 */
function showOrHide() {
	$('#banner').mouseover(function() {
		$('#banner>p').show()
		$('#icoList').show()
	}).mouseout(function() {
		$('#banner>p').hide()
		$('#icoList').hide()
	}).mouseout() // 触发事件
	// JS来触发移出的这个动作
	// 相当于人操作鼠标从轮播图区域移出
}

// 定义一个全局的ul元素margin-left值
// 0 -900 -1800 -2700 -3600
// 0 ~ -900：第一张正在滚动，第二张已经出现
// -900 ~ -1800：第二张正在滚动，第三张已经出现
let left = 0
// 下一次移动的间隔时间，在10/3000之间切换
let time

function moveLeft() {
	// 每一次移动10px，变大速度会快
	// 如果每次移动11px： -11 -22 ... -891 -902
	// 这个值必须要不图片宽度整除
	$('ul#imgList').css('margin-left', left + 'px')
	// 整张停顿的实现
	time = left % 900 === 0 ? 3000 : 10
	// 设置下限，循环重新开始
	if(left <= -3600) {
		left = 0
	}
	// 整张的时候计算当前滚动的图片，切换图标
	if(left % 900 === 0) {
		// 根据left的值计算正在滚动图片的索引i
		// 这个计算必须放在left归零之后，不然-3600会计算得到i是4
		let i = Math.floor(-left / 900) // 0-3
		changeIco(i)
	}
	// 改变left必须放在判断整张之后
	left -= 10
	// 多久移动一次，变大速度会慢
	setTimeout(moveLeft, time)
}

/**
 * @param {Object} i 图片的序号（索引），范围是0-3
 */
function changeImg(i) {
	// i：0，显示第一张图片，点亮第一个p标签，left：0
	// i：1，显示第二张图片，点亮第二个p标签，left：-900
	left = -900 * i // 在两张切换过程中不顺畅
	$('ul#imgList').css('margin-left', left + 'px')
	// i跟p标签的索引是一致的
	changeIco(i)
}

/**
 * @param {Object} i 图片的索引
 */
function changeIco(i) {
	$('#icoList>li>p').css('background-color', 'rgba(0, 0, 0, .5)')
					  .eq(i).css('background-color', '#F00')
}

/**
 * 切换图片到上一张
 */
function prev() {
	// 计算当前是第几张
	let now = Math.floor(-left / 900) // 0-3
	let i
	if(now < 1) {
		// 第一张，上一张实际是最后一张
		i = 3
	} else {
		// 非第一张
		i = now - 1
	}
	changeImg(i)
}

/**
 * 切换图片到下一张
 */
function next() {
	// 计算当前是第几张
	let now = Math.floor(-left / 900) // 0-3
	let i // 定义一个变量
	if(now === 3) {
		// 最后一张，下一张实际是第一张
		i = 0
	} else {
		// 非最后一张
		i = now + 1
	}
	changeImg(i)
}